<template>
  <div>
    <a-card class="">
      <a-tabs v-model:activeKey="formState.applyPath" @change="getData">
        <a-tab-pane :key="0" tab="门诊" />
        <a-tab-pane :key="1" tab="住院" />
        <!-- <a-tab-pane :key="2" tab="体检" /> -->
      </a-tabs>
      <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
        <a-form ref="formRef" class="form-style-flex" :model="formState" :colon="false" :label-col="{ style: { width: '80px' } }">
          <a-form-item name="pyjm">
            <a-input
              v-model:value="formState.pyjm"
              class="w-80"
              :placeholder="formState.applyPath === 1 ? '姓名/助记码/手机号/床位号' : '姓名/助记码/手机号'"
            />
          </a-form-item>
          <a-form-item name="stdate" label="申请日期">
            <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </a-form-item>
        </a-form>
      </SearchContainer>
    </a-card>

    <a-card class="mt-2">
      <div class="flex mb-2">
        <a-button class="mr-2" type="primary" @click="onEdit()"> 新增 </a-button>
        <BaseExport type="检验" name="检验申请" code="000182" :search-params="formState">导出</BaseExport>
      </div>
      <BaseTable
        :data-source="tableData"
        fill
        :loading="loading"
        :pagination="pagination"
        :column-code="formState.applyPath === 0 ? '000182' : '000736'"
        :scroll="{ x: 1800 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status === '0'" color="blue">未审核</a-tag>
            <a-tag v-if="record.status === '1'" color="green">已审核</a-tag>
            <a-tag v-if="record.status === '2'" color="red">已作废</a-tag>
            <a-tag v-if="record.status === '3'" color="green">已签署</a-tag>
          </template>
          <template v-if="column.dataIndex === 'status2'">
            <a-tag v-if="record.status === '2'" color="red">无效</a-tag>
            <a-tag v-else color="blue">有效</a-tag>
          </template>
          <template v-if="column.dataIndex === 'categroyName'">
            <PopoverTable :config="detailConfig" :params="{ categroyCode: record.categroyCode, lsh: record.lsh }" :width="600">
              {{ record.categroyName }}
            </PopoverTable>
          </template>
          <!-- <template v-if="column.dataIndex === 'barCode'">
            <PopoverTable :config="detailConfig" :params="{ categroyCode: record.categroyCode, lsh: record.lsh }" :width="600">
              {{ record.barCode }}
            </PopoverTable>
          </template> -->
          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <a-button type="link" size="small" :disabled="record.status === '2' || record.applyPath !== 4" @click="onEdit(record)">修改</a-button>
              <BaseButton confirm-text="确认作废?" type="text" danger size="small" :disabled="record.status === '2'" @click="onDelete(record)">
                作废
              </BaseButton>
            </a-space>
          </template>
        </template>
      </BaseTable>
    </a-card>
    <Edit v-model:open="open" :row-data="rowData" @success="getData" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import SearchContainer from '@/components/SearchContainer'
import { post } from '@/utils/request'
import BaseTable from '@/components/BaseTable'
import Edit from './components/Edit.vue'

const rowData = ref({})
const formRef = ref(null)
const open = ref(false)
const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  applyPath: 0
})
const detailConfig = ref({
  url: '/lis/LisApply/getlisInstrumentTypeRelationByCategroyCodeList',
  columnCode: '000183',
  rowKey: 'brId',
  formatResult: (data) => {
    const list = data.filter((item) => {
      return item.chek === 1
    })
    return list.map((item, index) => {
      return {
        NO: index + 1,
        ...item
      }
    })
  }
})

const onEdit = (row = {}) => {
  rowData.value = { ...row, apply: formState.value.applyPath }
  open.value = true
}

const onDelete = async (row) => {
  const { code, msg } = await post('/lis/LisApply/doCancelLisApply', { lsh: row.lsh })
  if (code !== 0) return message.error(msg)
  message.success(msg)
  getData()
}

const { loading, pagination, getData, tableData } = useTable({
  url: '/lis/LisApply/getLisApplyList',
  immediate: true,
  formatParams: () => {
    return {
      stdate: formState.value.dateRange?.[0],
      eddate: formState.value.dateRange?.[1],
      pyjm: formState.value?.pyjm,
      applyPath: formState.value?.applyPath
    }
  }
})
</script>
